<template>
  <div class="iconfont-container common-container">
     <div class="divider-container">
       <div class="left-branch"></div>
       <div class="left-leaf">
         <div class="left-leaf-text">fontClass引入</div>
       </div>
       <div class="tree"></div>
       <div class="right-branch"></div>
       <div class="right-leaf">
         <div class="right-leaf-text">symbol引入</div>
       </div>
     </div>
     <div class="iconfont-content">
       <div class="fontClass-container">
         <div class="fontClass-icon-con">
           <ul class="flex-wrap">
             <li
               class="flex-wrap-item"
               v-for="item in fontClassList"
             >
               <div class="wrap-item">
                 <i class="iconfont icon-style" :class="item.icon"></i>
               </div>
             </li>
           </ul>
         </div>
       </div>
       <div class="symbol-container">
         <div class="symbol-icon-con">
           <ul class="flex-wrap">
             <li
               class="flex-wrap-item"
               v-for="item in symbolList"
             >
               <div class="wrap-item">
                 <svg-icon class="icon-svg-width" :iconClass="item.icon"></svg-icon>
               </div>
             </li>
           </ul>
         </div>
       </div>
     </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return{
      fontClassList: [
        {id:'1', name: '照片水印', icon:'icon-picture-mark'},
        {id:'2', name: '相机水印', icon:'icon-photo-mark'},
        {id:'3', name: '路由', icon:'icon-route-3'},
        {id:'4', name: '401', icon:'icon-error-page'},
        {id:'5', name: '404', icon:'icon-page404'},
        {id:'6', name: '富文本编辑器', icon:'icon-full-text-edit'},
        {id:'7', name: '上传', icon:'icon-upload'},
        {id:'8', name: '开发组件', icon:'icon-dev-component'},
        {id:'9', name: '403', icon:'icon-page403'},
        {id:'10', name: '雷达', icon:'icon-radar-chart-2'},
        {id:'11', name: '组合图', icon:'icon-chart-mixed'},
        {id:'12', name: '地图坐标', icon:'icon-map-chart'},
        {id:'13', name: '饼图', icon:'icon-pie-chart'},
        {id:'14', name: '大屏轮询', icon:'icon-data-screen-solid'},
        {id:'15', name: '视频下载', icon:'icon-video-download'},
        {id:'16', name: '无网络', icon:'icon-bad-network'},
        {id:'17', name: '取消', icon:'icon-cancel-text'},
        {id:'18', name: '收藏', icon:'icon-attention-cycle'},
        {id:'19', name: '表格隐藏', icon:'icon-table-hidden'},
        {id:'20', name: '表格显示', icon:'icon-table-display'},
      ],
      symbolList: [
        {id:'1', name: '写周报', icon:'xiezhoubao'},
        {id:'2', name: '写招聘需求', icon:'xiezhaopinxuqiu'},
        {id:'3', name: '数据分析', icon:'shujufenxi'},
        {id:'4', name: '小红书标题', icon:'xiaohongshubiaoti'},
        {id:'5', name: '邀请好友', icon:'invite'},
        {id:'6', name: '二手交易', icon:'secondHand'},
        {id:'7', name: '社交评论', icon:'socialChat'},
        {id:'8', name: '旅行', icon:'travel'},
        {id:'9', name: '魔方', icon:'lottery'},
        {id:'10', name: '郊游', icon:'mission'},
        {id:'11', name: '拼图', icon:'puzzle'},
        {id:'12', name: '教师', icon:'teacher'},
        {id:'13', name: '蛋糕', icon:'cake'},
        {id:'14', name: '马卡龙', icon:'macarons'},
        {id:'15', name: '三明治', icon:'sandwich'},
        {id:'16', name: '棒棒糖', icon:'sugar'},
        {id:'17', name: '竞品研究报告', icon:'jingpinyanjiubaogao'},
        {id:'18', name: '品牌slogan', icon:'pinpaislogan'},
        {id:'19', name: '中英翻译', icon:'yingwenfanyi'},
        {id:'20', name: '直播带货', icon:'zhibodaihuo'},
      ],
    }
  }
}
</script>

<style lang="scss" scoped>
.iconfont-container{
  position: relative;
}
.divider-container{
  position: absolute;
  width: 300px;
  height: calc(100vh - 180px);
  left: calc(50% - 150px);
}
.left-branch{
  border: 2px solid #bb9b8e;
  height: 30px;
  position: absolute;
  left: 135px;
  bottom: 50px;
  transform: rotate(120deg);
}
.left-leaf{
  width: 40px;
  height: 120px;
  border: 2px solid #a0b5a8;
  position: absolute;
  left: 42px;
  bottom: 30px;
  transform: rotate(100deg);
  background: #ddeadd;
  border-radius: 30px 36px 40px 44px/50px 30px 20px 30px;
}
.left-leaf-text{
  position: absolute;
  width: 100px;
  transform: rotate(270deg);
  left: -30px;
  top: 50px;
}
.right-leaf-text{
  position: absolute;
  width: 100px;
  transform: rotate(270deg);
  left: -30px;
  top: 50px;
}
.tree{
  position: absolute;
  left: 149px;
  border: 2px solid #bb9b8e;
  height: 100%;
}
.right-branch{
  border: 2px solid #bb9b8e;
  height: 30px;
  position: absolute;
  left: 160px;
  top: 80px;
  transform: rotate(50deg);
}
.right-leaf{
  width: 40px;
  height: 120px;
  border: 2px solid #a0b5a8;
  position: absolute;
  left: 212px;
  top: 10px;
  transform: rotate(80deg);
  background: #ddeadd;
  border-radius: 25px 60px 30px 35px/40px 28px 20px 30px;
}
.iconfont-content{
  display: flex;
}
.fontClass-container{
  width: 50%;
  height: calc(100vh - 180px);
  border: 2px solid #a0b5a8;
}
.fontClass-icon-con{
  width: calc(100% - 190px);
  height: calc(100% - 40px);
  margin: 20px;
  overflow-y: auto;
}
.symbol-container{
  width: 50%;
  height: calc(100vh - 180px);
  border: 2px solid #a0b5a8;
}
.symbol-icon-con{
  width: calc(100% - 190px);
  height: calc(100% - 40px);
  margin: 20px 170px 20px;
  overflow-y: auto;
}
.flex-wrap{
  display: flex;
  flex-wrap: wrap;
}
.flex-wrap-item{
  flex-basis: 25%;
  flex-grow: 0;
}
.wrap-item{
  border: 1px dashed #e7e7e7;
  box-sizing: border-box;
  height: 120px;
  text-align: center;
  padding-top: 35px;
}
.icon-style{
  font-size: 50px;
}
.icon-svg-width{
  font-size: 50px;
}
</style>
